<!--
*@Author: zt
*@Description:新增预警
*@Date: 2024-08-27
-->
<template>
  <u-dialog
    v-bind="$attrs"
    @submit="submit"
    @close="dialogClose"
    title="新增预警"
  >
    <a-layout class="f-h-100 s-bg-white">
      <a-layout-content style="overflow: hidden">
        <a-row :gutter="60" class="f-h-100">
          <a-col :span="24">
            <u-form
              :elements="formEls"
              :model="form"
              :gutter="0"
              ref="formRef"
            ></u-form>
          </a-col>
        </a-row>

        <u-busi-card title="群聊信息" v-show="form.isGroup == 1">
          <CreateGroup ref="groupRef" />
        </u-busi-card>
      </a-layout-content>
    </a-layout>
  </u-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch, useAttrs } from 'vue';
import { messageC } from '@/util/common';
import { cloneDeep } from 'lodash';
import { storeToRefs } from 'pinia';
import { useLoginStore } from '@/store';
import { warnEventBus } from '@/util/eventBus';
import { isSel1 } from '@/common/model/base';
import CreateGroup from '@/views/oa/emergency/group/createEdit/Edit.vue';
import * as emergencyWarningApi from '@/service/emergencyWarning/index';

const { userInfo } = storeToRefs(useLoginStore());
const attrs = useAttrs();
const emits = defineEmits(['success', 'close']);
const formRef = ref<FormInstance>();
const form = reactive<any>({});
const formItemProps: FormItemProps & _IExtra = {
  labelWidth: '120px',
  colon: false,
};
const selectOptions = [
  {
    label: '一级',
    value: '1',
  },
  {
    label: '二级',
    value: '2',
  },
  {
    label: '三级',
    value: '3',
  },
  {
    label: '四级',
    value: '4',
  },
];

// 群聊相关
const groupRef = ref();

let formEls: Array<_IFormEl> = [
  {
    label: '预警等级',
    key: 'warnLevel',
    col: { span: 12 },
    element: 'select',
    formItemProps: { ...formItemProps, required: true },
    componentProps: { options: computed(() => selectOptions) },
  },
  {
    label: '预警标题',
    key: 'title',
    col: { span: 12 },
    element: 'input',
    formItemProps: { ...formItemProps, required: true },
  },
  {
    label: '预警时间',
    key: 'warnTime',
    col: { span: 12 },
    element: 'datepicker',
    formItemProps: { ...formItemProps, required: true },
  },
  {
    label: '启用人',
    key: 'username',
    col: { span: 12 },
    element: 'input',
    formItemProps: { ...formItemProps, required: true },
    componentProps: { disabled: true },
  },
  {
    label: '原因',
    key: 'content',
    col: { span: 24 },
    element: 'textarea',
    formItemProps: { ...formItemProps, required: true },
  },
  {
    label: '是否创建对应群聊',
    key: 'isGroup',
    col: { span: 24 },
    element: 'select',
    formItemProps: { ...formItemProps },
    componentProps: {
      options: isSel1(),
      onChange: function (value, options) {
        if (value == 1) {
          groupRef.value.initShow(true);
        } else {
          groupRef.value.dialogClose();
        }
      },
    },
  },
];

// 保存提交
const submit = async () => {
  if (form.isGroup == 1) {
    await groupRef.value.formRef.form.validate();
  }
  formRef.value.form.validate().then(async () => {
    let tForm = cloneDeep(form);
    const res = await emergencyWarningApi.add(tForm);
    if (res.code == 0) {
      messageC(res.msg, 'success');

      if (form.isGroup == 1) {
        let tFrom = groupRef.value.form;
        tFrom['groupLabel'] = res.data['keyid'];
        groupRef.value.form = tFrom;
        await groupRef.value.submit();
      }

      for (let k in form) {
        form[k] = '';
      }

      warnEventBus.emit('getWrnLevel');
      emits('success');
    } else {
      messageC(res.msg, 'warning');
    }
  });
};
// 关闭
const dialogClose = () => {
  for (let k in form) {
    form[k] = '';
  }
  emits('close');
};

watch(
  () => attrs.open,
  (val, nav) => {
    if (val) {
      form.username = userInfo.value['name'];
    }
  }
);
</script>

<style lang="scss" scoped>
.u-name-box {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  text-align: center;
  line-height: 80px;
  background: linear-gradient(348deg, #1890ff 0%, #dbedfe 100%);
  font-size: var(--font-size-level-1);
  color: #fff;
}

.u-span-name {
  font-weight: 400;
  font-size: var(--font-size-level-2);
  color: #1890ff;
}

.u-span-value {
  font-weight: 400;
  font-size: var(--font-size-level-1);
  color: #666666;
}
</style>
